<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>酒店预订系统</title>
    <link rel="stylesheet" th:href="@{css/sy.css}">
    <style>
        .c{
            width: 1200px;
            height: 800px;
            margin: 0 auto;
            border: grey 1px solid;
        }
        .ca{
            width:1200px;
            height: 30px;
            font-size: 24px;
            color: #000000;
            text-indent: 2em;
        }
        .cb{
            width: 1200px;
            height: 50px;
            line-height: 50px;
            color: #0C0C0C;
        }
        .cc{
            width: 1200px;
            height: 30px;
        }
        .jj{
            width: 1160px;
            height: 30px;
            background: #e1e1e1;
            margin: 0 auto;
        }
        .cca {
            width: 250px;
            display: inline;
            line-height: 30px;
            color: #0C0C0C;
            font-size: 18px;
            float: left;
            text-align: center;
        }
        .ccb{
            width: 450px;
            display: inline;
            line-height: 30px;
            color: #0C0C0C;
            font-size: 18px;
            float: left;
            text-align: center;
        }
        .ccc{
            width: 80px;
            display: inline;
            line-height: 30px;
            color: #0C0C0C;
            font-size: 18px;
            float: left;
            text-align: center;
        }
        .ccd{
            width: 80px;
            display: inline;
            line-height: 30px;
            color: #0C0C0C;
            font-size: 18px;
            float: left;
            text-align: center;
        }
        .cce{
            width: 90px;
            display: inline;
            line-height: 30px;
            color: #0C0C0C;
            font-size: 18px;
            float: left;
            text-align: center;
        }
        .ccf{
            width: 90px;
            display: inline;
            line-height: 30px;
            color: #0C0C0C;
            font-size: 18px;
            float: left;
            text-align: center;
        }
        .ccg{
            width: 120px;
            display: inline;
            line-height: 30px;
            color: #0C0C0C;
            font-size: 18px;
            float: left;
            text-align: center;
        }
        .cd{
            width: 1200px;
            height: 200px;
        }
        .kk{
            width: 1160px;
            height: 200px;
            margin: 0 auto;
            border-bottom: grey 1px solid;
        }
        .cda{
            width: 250px;
            height: 200px;
            float: left;
            margin: 0 auto;
        }
        .cdda{
            width: 240px;
            height: 190px;
            margin: 5px auto;
        }
        .cdb{
            width: 449px;
            height: 200px;
            border-left: grey 1px solid;
            line-height: 80px;
            text-align: center;
            float: left;
            color: #4a4a4a;
        }
        .cdc{
            width: 79px;
            height: 200px;
            border-left: grey 1px solid;
            line-height: 200px;
            text-align: center;
            float: left;
            color: #4a4a4a;
        }
        .cdd{
            width: 79px;
            height: 200px;
            border-left: grey 1px solid;
            line-height: 200px;
            text-align: center;
            float: left;
            color: #4a4a4a;
        }
        .cde{
            width: 89px;
            height: 200px;
            border-left: grey 1px solid;
            line-height: 200px;
            text-align: center;
            float: left;
            color: #4a4a4a;
        }
        .cdf{
            width: 89px;
            height: 200px;
            border-left: grey 1px solid;
            line-height: 200px;
            text-align: center;
            float: left;
            color: #4a4a4a;
        }
        .cdg{
            width: 119px;
            height: 200px;
            border-left: grey 1px solid;
            line-height: 200px;
            text-align: center;
            float: left;
            color: #4a4a4a;
            margin: 0 auto;
        }
        .mm{
            width: 1200px;
            height: 30px;
            margin: auto;
        }
    </style>
</head>
<body>
<!--页头-->
<div th:insert="~{hotel_common/commons::nav}"></div>
<!--内容-->
<div class="c">
    <div class="mm"></div>
    <div class="ca"> 客房列表</div>
    <form action="">
        <div class="cb">&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="text" placeholder="请输入关键字">&nbsp;&nbsp;&nbsp;
            <button type="submit">搜索</button>
        </div>
        <table border="1" style="width:1170px;height:300px;padding: 10px;margin: 10px">
            <thead>
            <tr>
                <td>客房</td>
                <td>房型</td>
                <td>描述</td>
                <td>可住人数</td>
                <td>床位数</td>
                <td>房价</td>
                <td>房态</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody>
                <tr th:each="room:${AllRoom}">
                    <td><img th:src="@{img/s1.jpg}" alt="" width="240px" height="190px"></td>
                    <td th:text="${room.getName()}"></td>
                    <td th:text="${room.getRemark()}"></td>
                    <td th:text="${room.getLiveNum()}"></td>
                    <td th:text="${room.getBedNum()}"></td>
                    <td th:text="${room.getPrice()}+'元'"></td>
                    <td th:text="${room.getStatus()==1?'可预定':'满房'}">可预定</td>
                    <td>
                        <button type="submit">&nbsp;&nbsp;预&nbsp;定&nbsp;&nbsp;</button>
                    </td>
                </tr>

            </tbody>
        </table>
        <!--<nav aria-label="Page navigation">-->
            <!--<div class="modal-footer">-->
                <!--<div class="col-md-6">-->
                    <!--当前第 [[${pageInfo.pageNum}]] 页，共 [[${pageInfo.pages}]] 页，[[${pageInfo.total}]] 条记录-->
                <!--</div>-->
                <!--<ul class="pagination">-->
                    <!--<li class="page-link" th:if="${RoomList.hasPreviousPage}">-->
                        <!--<a th:href="'/listRooms'+'&pageNum=1'">首页</a>-->
                    <!--</li>-->
                    <!--<li class="page-link" th:if="${RoomList.hasPreviousPage}">-->
                        <!--<a th:href="'/listRooms'+'&pageNum='+${RoomList.prePage}">上一页</a>-->
                    <!--</li>-->
                    <!--<li class="page-link" th:each="nav:${RoomList.navigatepageNums}">-->
                        <!--<a th:href="'/listRooms'+'&pageNum='+${nav}"-->
                           <!--th:text="${nav}" th:if="${nav != RoomList.pageNum}"></a>-->
                        <!--<span style="font-weight: bold;background: lightskyblue;" th:if="${nav == RoomList.pageNum}"-->
                              <!--th:text="${nav}"></span>-->
                    <!--</li>-->
                    <!--<li class="page-link" th:if="${RoomList.hasNextPage}">-->
                        <!--<a th:href="'/listRooms'+'&pageNum='+${RoomList.nextPage}">下一页</a>-->
                    <!--</li>-->
                    <!--<li class="page-link" th:if="${RoomList.pageNum < RoomList.pages}">-->
                        <!--<a th:href="'/listRooms'+'&pageNum='+${RoomList.pages}">尾页</a>-->
                    <!--</li>-->
                <!--</ul>-->
            <!--</div>-->
        <!--</nav>-->
    </form>
</div>
<!--页脚-->
<div class="z">
    <footer>
        <div class="za">科院主题酒店
            <hr></div>
        <div class="zb">以特定的主题，来体现酒店的建筑风格和装修艺术，
            以及特定的文化氛围，如历史、文化、城市、自然、神话故事等为主题
            本酒店主以经济实惠为主! </div>
        <div class="zc">@kyjd版权所有</div>
    </footer>
</div>
</body>
</html>